<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .zhu{
        width: 600px;
        height: 500px;
        background-color: floralwhite;
        margin: 0 auto;
    }
    .nei{
        width: 100%;
        height: 450px;
        background-color: lightgray;
    }
    .xia{
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
    }
    span{
        padding: 10px;
        margin: 5px;
    }
    .sii{
        background-color: aqua;
    }
</style>
<body>
    <div class="zhu">
        <div class="nei">

        </div>
        <div class="xia">
            <button>开始点名</button>
        </div>
    </div>
    <script src="./js/data.js"></script>
    <script>
        var dd=document.getElementsByClassName('nei')[0]
        console.log(dd);
        function render(arr,val){
            var str=''
            for(var i=0;i<arr.length;i++){
                str+='<span>'+arr[i]+'</span>'
            }
            val.innerHTML=str
        }
        render(data,dd)
        // var but=document.getElementsByTagName('button')[0]
        // var spans=document.getElementsByTagName('span')
        // console.log(spans);
        // but.onclick=function(){
        //     but.disabled=true;
        //     var tim=setInterval(function(){
        //         var index=parseInt(Math.random()*data.length)
        //         for(var i=0;i<spans.length;i++){
        //             spans[i].className=''
        //         }
        //         spans[index].className='sii'
        //     },200)
        //     setTimeout(function(){
        //         clearInterval(tim)
        //         but.disabled=false
        //     },5000)
        // }
        var but=document.getElementsByTagName('button')[0]
        var spans=document.getElementsByTagName('span')
        console.log(spans);
        but.onclick=function(){
            but.disabled=true;
            var tim=setInterval(function(){
                var index=parseInt(Math.random()*data.length)
                for(var i=0;i<spans.length;i++){
                    spans[i].className=''
                }
                spans[index].className='sii'
            },200)
            setTimeout(function(){
                clearInterval(tim)
                but.disabled=false
            },5000)
        }
    </script>
</body>
</html>